<template>
  <div>
<el-row :gutter="20">
  <el-col :span="20" :class="{ animation: !PalBox }">
      <div >
      <el-table
        :data="tableData"
        height="400"
        border="true"
        stripe="true"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="Name"
          width="180">
        </el-table-column>
        <el-table-column
          prop="description"
          label="Description">
        </el-table-column>
        <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index)">请求绑定</el-button>
              </template>
        </el-table-column>
      </el-table></div>
    </el-collapse-transition>
  </el-col>

  <el-col :span="20" :class="{ animation: PalBox }">
    <div >
    <el-table
      :data="tableData2"
      height="400"
      border="true"
      stripe="true"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        width="180">
      </el-table-column>
      <el-table-column
        prop="description"
        label="Description">
      </el-table-column>
      <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index)">请求绑定</el-button>
            </template>
      </el-table-column>
    </el-table>
    </div>
  </el-col>
</el-row>


    <el-row>

      <el-col :span="3">
        <el-button style="margin-top: 30px;" type="primary" icon="el-icon-refresh-left" @click = "show" round >换一批</el-button>
      </el-col>
      <el-col :span="3" :offset="18">
        <el-button style="margin-top: 30px;" type="primary" icon="el-icon-refresh-left" @click = "showPalBox" round>切换显示</el-button>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  import axios from 'axios'
  import Global from "../global.vue"
  export default {
    created:function(){
      this.show()
    },
    methods:{
      showPalBox(){
        this.PalBox =! this.PalBox;
      },
      handleEdit(index){
        console.log(index);
        var _rid = parseInt(this.tableData[index].id)
        var _sid = parseInt(this.$Global.user_id)
        var _this = this;
            //向服务器提交数据
          axios.post('http://abcds.vaiwan.com/pal/send',{
            rid:_rid,
            sid:_sid
          })
              .then(function(response) {
                    //成功时服务器返回 response 数据
                  console.log(response)
              })
              .catch(function(error) {
                  console.log(error);
              });
      },
      show(){
        var _this = this;
            //向服务器提交数据
          axios.post('http://abcds.vaiwan.com/pal/show')
              .then(function(response) {
                    //成功时服务器返回 response 数据
                  console.log(response)
                  _this.tableData = response.data.data;
              })
              .catch(function(error) {
                  console.log(error);
              });
      },
    },
    data() {
      return {
        PalBox :false,
        tableData: [{
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }],
        tableData2: [{
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }]
      }
    }
  }
</script>
<style>
  .animation{
    animation:1s linear 0s alternate myanimation;
  }
  @keyframes myanimation{
    from{width: 10%;}
    to{width: 90%;}
  }
</style>
